<template>
	<view class="page">
		<view class="order-list" v-if="list.length > 0">
			<view class="order-item" v-for="(item, index) in list" :key="index">
				<view class="top-info">
					<view class="type">{{ item.serviceName || '--' }}</view>
				</view>
				<view class="serve-user">
					订单号：
					<text>{{ item.orderSn || '--' }}</text>
				</view>
				<view class="serve-user" v-if="item.patientName">
					服务对象：
					<text>{{ item.patientName || '--' }}</text>
				</view>
				<view class="serve-user">
					就诊医院：
					<text>{{ item.hospitalName || '--' }}</text>
				</view>
				<view class="serve-user" v-if="item.treatmentTime">
					服务时间：
					<text>{{ item.treatmentTime }}</text>
				</view>
				<view class="serve-user">
					陪&nbsp;诊&nbsp;师&nbsp;：
					<text>{{ item.escortName || '--' }}</text>
				</view>
				<view class="serve-user" style="padding-bottom: 10rpx;">
					服务需求：
					<text>{{ item.serviceRequirements || '--' }}</text>
				</view>
				<view class="bottom-info">
					<view v-if="item.isOverdue" @click="changeTime(item)" style="background-color: #c2c4c8;" class="now-start">更改时间</view>
					<view v-if="item.status == 1" :style="item.allocationStatus == 1 ? 'background-color:#ff9191' : ''" class="now-start" @click="dispatch(item)">
						{{ item.allocationStatus == 0 ? '派单' : '改派' }}
					</view>
				</view>
			</view>
		</view>
		<view class="empty-view" v-else>暂无订单</view>

		<!-- 可以选择的陪诊师 -->
		<u-picker :show="show" :columns="attendants" keyName="name" @confirm="confirm" @cancel="show = false"></u-picker>
		<u-datetime-picker :minDate="minDate" :show="isShow" v-model="form.treatmentTime" mode="datetime" @confirm="isConfirm" @cancel="isShow = false"></u-datetime-picker>
	</view>
</template>

<script>
import { convertTimeType } from '@/utils/index.js';
import { getPendingServiceOrderList, getEscortSelectList, orderAllocation, updateOrderTreatmentTime } from '../../apis/request.js';
export default {
	data() {
		return {
			pageNo: 1,
			list: [],
			attendants: [],
			show: false,
			orderId: '',
			isShow: false,
			form: {
				orderId: '',
				treatmentTime: ''
			},
			minDate: Number(new Date())
		};
	},
	onPullDownRefresh() {
		this.init();
		uni.stopPullDownRefresh();
	},
	onReachBottom() {
		this.pageNo++;
		this.getList();
	},
	onLoad(options) {
		this.init();
		// 进行全局事件监听
		uni.$on('selectEscort', escort => {
			this.escort = escort;
			this.params.escortId = escort.id;
		});
		uni.$on('selectDatetime', bookDatetime => {
			this.params.workingCalendarId = bookDatetime.workingCalendarId;
			this.params.treatmentTime = bookDatetime.treatmentTime;
		});
	},
	onUnload() {
		//解除全局事件监听
		uni.$off('selectEscort');
		uni.$off('selectDatetime');
	},
	methods: {
		init() {
			this.pageNo = 1;
			this.total = 0;
			this.list = [];
			this.getList();
		},
		getList() {
			getPendingServiceOrderList({
				pageNo: this.pageNo,
				pageSize: 10
			}).then(res => {
				if (this.pageNo == 1) {
					this.list = res.records;
				} else {
					if (this.list.length < res.total) {
						this.list = this.list.concat(res.records);
					} else {
						this.list = this.list;
					}
				}
				let nowDate = new Date().getTime();
				let treatmentTime;
				this.list.forEach((item, index) => {
					//待分配且过期
					if (item.allocationStatus == 0) {
						treatmentTime = new Date(item.treatmentTime).getTime();
						if (nowDate > treatmentTime) {
							item.isOverdue = 1;
						}
					}
				});
			});
		},
		dispatch(item) {
			this.orderId = item.id;
			this.attendants = [];
			getEscortSelectList({
				orderId: this.orderId
			}).then(res => {
				// this.attendants[0] = res;
				this.attendants.push(res);
				this.show = true;
			});
		},
		confirm(e) {
			this.show = false;
			uni.showModal({
				title: '提示',
				content: '确定派单当前陪诊师吗',
				success: res => {
					if (res.confirm) {
						orderAllocation({
							escortId: e.value[0].id,
							id: this.orderId
						}).then(res => {
							this.getList();
							uni.showToast({
								title: '预约成功',
								duration: 2000,
								icon: 'none'
							});
						});
					} else if (res.cancel) {
					}
				}
			});
		},
		changeTime(item) {
			this.form.orderId = item.id;
			this.isShow = true;
		},
		async isConfirm(e) {
			this.form.treatmentTime = await convertTimeType(e.value);
			updateOrderTreatmentTime(this.form).then(res => {
				this.isShow = false;
				this.init();
				uni.showToast({
					title: '修改成功',
					duration: 2000,
					icon: 'none'
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	background-color: #f2f2f2ff;
	height: 100%;
	min-height: 100vh;

	.order-list {
		.order-item {
			margin-top: 20rpx;
			background-color: #fff;
			width: 750rpx;
			box-sizing: border-box;
			padding: 30rpx 30rpx 20rpx 30rpx;

			.top-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 8rpx;

				.type {
					font-size: 30rpx;
				}

				.state {
					font-size: 28rpx;
				}
			}

			.serve-user {
				margin: 14rpx 0 20rpx 0;
				font-size: 26rpx;
				color: #999999;

				text {
					color: #020202;
				}
			}

			.bottom-info {
				border-top: 2rpx solid #ececec;
				padding-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.now-start {
					margin-left: 20rpx;
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 26rpx;
					background-color: #32C59A;
					color: #fff;
					font-size: 26rpx;
					text-align: center;
					box-sizing: border-box;
				}

				.cancel-pay {
					margin-left: 20rpx;
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 26rpx;
					color: #999999;
					font-size: 26rpx;
					text-align: center;
					border: 2rpx solid #dddddd;
					box-sizing: border-box;
				}
			}
		}
	}
}
</style>
